<template>
	<div class="tags">
		<!--    伪选择框-->
		<div class="tags-box" :class="[selectType == true?'tags-box-border-choose':'tags-box-border']">
			<span class="tags-box-title" v-if="tagsForm.length == 0">标签</span>
			<div class="tags-item" v-for="(item,index) in tagsForm" v-if="index<1">
				<div class="select-item-sign" :style="{backgroundColor:item.color}"></div>
				<span class="tags-item-title">{{ item.name }}</span>
				<span class="tags-item-subtitlt" v-if="tagsForm.length > 1">+ {{tagsForm.length -1}}</span>
			</div>
			<i class="tags-box-icon el-icon-arrow-down"
				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
		<el-select ref="tagsSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange"
			size="medium" placeholder="请选择">
			<template slot="empty">
				<div class="select">
					<div class="select-item" v-for="item in options" @click.stop="groupClick(item)">
						<el-checkbox v-model="item.type" @click.stop.native="checkboxClick">
							<div style="display: flex;flex-direction: row;align-items: center">
								<div class="select-item-sign" :style="{backgroundColor:item.color}"></div>
								<span>{{ item.name }}</span>
							</div>
						</el-checkbox>
					</div>
				</div>
				<el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
			</template>
		</el-select>
	</div>
</template>
<script>
	import { list } from '@/api/tag.js'
	export default {
		data() {
			return {
				options: [],
				selectTitle: '',
				selectType: false,
				tagsForm: [],
				checkboxloading: false
			}
		},
		created() {
			this.loadList()
		},
		methods: {
			loadList(){
				var _this = this
				list({current:1,size:100,tagType:'01'},false).then(res=>{
					res.data.records.forEach(function(item){
						item.type = false
					})
					_this.options = res.data.records
				})
			},
			groupClick(item) {
				item.type = !item.type
				this.filterClick()
			},
			checkboxClick(data) {
				var _this = this
				if (_this.checkboxloading == true) {
					return
				}
				_this.checkboxloading = true
				setTimeout(function() {
					console.log(data)
					console.log('进来了')
					_this.checkboxloading = false
					_this.filterClick()
				}, 100)
			},
			delClick(item) {
				console.log(item)
				var _this = this
				_this.options.forEach(function(items) {
					if (items.value == item.value) {
						items.type = false
					}
				})
				_this.filterClick()
			},
			filterClick() {
				var _this = this
				var data = []
				_this.options.forEach(function(item) {
					if (item.type == true) {
						data.push(item)
					}
				})
				_this.tagsForm = data
				_this.$emit('tagClick',_this.tagsForm)
				_this.$refs.tagsSelect.blur()
			},
			visibleChange(item) {
				var _this = this
				_this.selectType = item
			},
			emptyClick(){
			    this.tagsForm = []
				this.options.forEach(function(item){
					item.type = false
				})
			}
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
		justify-content: space-between;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-sign {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 5px;
	}


	.tags-item {
		padding: 6px 6px;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 1px solid #e9e9eb;
	}

	.tags-item-title {
		max-width: 66px;
		font-size: 12px;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
		color: #909399;
	}

	.tags-item-subtitlt{
		font-size: 12px;
		color: #606266;
		display: block;
		margin-left: 8px;
		white-space: nowrap;
	}

	.tags-item-icon {
		font-size: 12px;
		color: #909aaa;
		margin-top: 1px;
		pointer-events: auto;
	}


	.tags {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e47777;
		border-radius: 4px;
		position: relative;
	}

	.tags-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		background-color: #f5f6f8;
		padding-left: 4px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.tags-box-icon {
		color: #C0C4CC;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}

	.tags-box-border {
		border: 1px solid #f5f6f8;
	}

	.tags-box-border-choose {
		border: 1px solid #1890ff;
	}

	.tags-box-title {
		color: #C0C4CC;
		font-size: 14px;
		font-weight: 500;
		display: block;
		margin-left: 10px;
	}

	/deep/.el-input--medium .el-input__inner {
		background-color: #f5f6f8;
		border-color: #F5F6F8;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/deep/.el-input--medium .el-input__inner:hover {
		background-color: #ecedf0;
	}

	/deep/.el-select {
		width: 100%;
	}

</style>
